<template>
  <div class="search" @touchend="active = false">
    <h3>AI<span>文件搜索</span></h3>
    <p>快速精准地查找用户指定或描述的文件，提升查找效率并简化文件管理流程。</p>
    <van-field class="search-input" placeholder="请输入" v-model="search">
      <template #right-icon>
        <div class="search-icon">
          <SvgIcon v-show="search.length !== 0" @click="clearContent" class="icon-item" name="清空" :size="24" />
          <SvgIcon :class="`icon-item ${active ? 'active' : ''}`" @touchstart="onTouch" name="麦克风" :size="16" />
          <van-button @click="querysubmit" style="width: 76px;height: 36px;white-space: nowrap;" type="primary">
            AI搜索
          </van-button>
        </div>
      </template>
    </van-field>
    <div class="file">
      <van-tabs v-model:active="tabActive" @click="tabHandler">
        <van-tab title="全部" name="1" :key="1"></van-tab>
        <van-tab title="笔记" name="2"></van-tab>
        <van-tab title="文档" name="3"></van-tab>
        <van-tab title="图片" name="4"></van-tab>
<!--        <van-tab v-if="message === '下载'" title="视频" name="5"></van-tab>-->
      </van-tabs>
      <div class="tabs-content" v-if="FileList.length > 0">
        <van-checkbox v-model="checkedAll" @click="isCheckedAll" icon-size="14px">文件名</van-checkbox>
        <van-checkbox-group v-model="checkList" @change="isCheckedList" ref="checkboxGroup">
          <van-checkbox :name="item.url" icon-size="14px" v-for="item in FileList">
            <div class="Fileitem">
              <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="">
              <div class="fileName">
                <span>{{ item.filename }}</span>
                <span>{{ item.url }}</span>
              </div>
              <span class="fileTime">{{ item.time }}</span>
            </div>
          </van-checkbox>
        </van-checkbox-group>
      </div>
      <van-empty v-else description="快开始搜索文件吧" />
      <div v-show="FileList.length > 0 && fileCount > 0" class="search-button">
        <van-button @click="close" plain type="primary">取消</van-button>
        <van-button @click="download" plain type="primary">{{ message }}({{ fileCount }})</van-button>
      </div>
    </div>

    <div height="84px" style="height: 84px;display: none;"></div>
    <van-notify type="success">
      <van-icon name="bell" style="margin-right: 4px;" />
      <span>通知内容</span>
    </van-notify>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { downloadFile, GeneratePPT, getSearch, downloadFiles } from "@/api/index"
import { showNotify } from 'vant';
import { siftFile } from './utils/index'
import SvgIcon from "@/components/SvgIcon.vue";
const prop = defineProps({
  message: {
    type: String,
    default: '下载'
  }
})
const emit = defineEmits(['download', 'close'])
const search = ref('')
const active = ref(false)
const tabActive = ref(false)
const checkedAll = ref(false)
const checkboxGroup = ref(null)
const fileCount = ref(0)
const checkList = ref([])
const FileList = ref([])
const oldFileList = ref([])
const isCheckedAll = (e) => {
  checkboxGroup.value.toggleAll(checkedAll.value)
}
const isCheckedList = (e) => {
  fileCount.value = e.length
  checkedAll.value = e.length === FileList.value.length
}
const onTouch = () => {
  AndroidInterface.startListening()
  active.value = true
}

const handleRecognitionResult = (data) => {
  search.value = data
}
const download = () => {
  if (fileCount.value === 0) {
    showNotify({ type: 'warning', message: "请选择文件" });
    return
  }
  if (prop.message === '确认') {
    // console.log(FileList.value)
    // console.log(checkList.value)
    emit('download', checkList.value)
    return
  }
  if (checkList.value.length === 1) {
    downloadFile(checkList.value[0])
  } else if (checkList.value.length > 1) {
    downloadFiles(checkList.value.toString())
  }
}

const tabHandler = (e) => {

  FileList.value = siftFile(tabActive.value, oldFileList.value)
  console.log(FileList)
}

const searchChange = (e) => {
  search.value = e
}
const searchClear = (e) => {
  search.value = ''
}
const querysubmit = () => {
  initData(search.value)
}
const close = () => {
  checkedAll.value = false
  checkboxGroup.value.toggleAll(checkedAll.value)
  emit('close')

}
const clearContent = () => {
  search.value = ''
  FileList.value = []
}
onMounted(() => {
  // initData()
})
const initData = async (str = '') => {
  try {
    const { code, data } = await getSearch(str)
    if (code === 200) {
      FileList.value = data.map((item, index) => {
        console.log(item)
        const name = item[0].split('/')
        const dotIndex = item[0].lastIndexOf('.');
        const fileExtension = item[0].substring(dotIndex + 1);
        return { filename: name[name.length - 1], url: item[0], id: index, time: item[1], suffix: fileExtension }
      })
      oldFileList.value = [...FileList.value]
      tabActive.value = 1
    }
  } catch (error) {

  }
}
</script>

<style lang="scss" scoped>
.search {
  padding: 12px;

  h3 {
    color: #1E5DFF;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 8px 0;

    span {
      color: #191919;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      margin: 8px 0;
    }
  }

  p {
    color: #818391;
    font-size: 14px;

  }

  .search-input {
    border-radius: 6px;
    height: 52px;
    font-size: 14px;
    display: flex;
    align-items: center;
    background-color: #fff;
    margin-top: 28px;

    .search-icon {
      display: flex;
      align-items: center;
      justify-content: center;

      .icon-item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        color: #fff;

        &:nth-child(2) {
          border-radius: 50%;
          padding: 4px;
          color: #000000;
          transition: 1s;
        }
      }

      .active {
        background-color: var(--van-primary-color);
        color: #fff !important;
      }
    }
  }

  .file {
    background-color: #fff;
    margin-top: 8px;
    height: auto;
    border-radius: 6px;
    position: relative;

    .van-tabs {
      position: relative;

      :deep(.van-tabs__wrap) {
        width: 100%;
        padding-left: 0 !important;

        .van-tabs__nav {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }

    .tabs-content {
      padding: 20px;
      height: 30%;

      :deep(.van-checkbox) {
        font-size: 12px;
        font-weight: 600;

        .van-checkbox__label {
          width: 100%;
        }
      }

      .Fileitem {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 14px 0;

        img {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          margin-left: 5px;
        }

        .fileName {
          display: flex;
          justify-content: center;
          flex-direction: column;
          margin-left: 10px;

          span {
            font-size: 12px;

            &:nth-child(2) {
              color: #999;

              width: 120px;
              overflow: hidden;
              /* 超出部分隐藏 */
              text-overflow: ellipsis;
              /* 显示省略号 */
            }
          }

        }

        .fileTime {
          margin-left: auto;
          color: #999;

        }
      }

      :deep(.van-checkbox-group) {
        overflow: hidden;
        height: 317px;
        overflow-y: auto;
        padding-bottom: 30px;
      }
    }
  }

  .search-button {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;

    button {
      width: 50%;
      height: 100%;
      border-radius: 0;
      border: none;

      &:nth-child(1) {
        border-right: 1px solid rgba(175, 175, 175, 0.466);
      }
    }
  }
}
</style>
